<template>
  <div class="header">
    <!-- <keep-alive> -->
    <div class="group">
      <img class="logo" src="~img/headerlogo.png" alt />
      <div class="navbox" style="width:100%;">
        <div class="nav">
          <div style="display:inline-block;" v-for="(item,index) in menuData" :key="index">
            <router-link :to="item.path" :class="{'router-link-active':item.active}" exact>{{item.name}}{{item.active}}</router-link>
            <span v-if="index !=menuData.length-1">|</span>
          </div>
        </div>
      </div>
    </div>
    <div class="nav_small" v-show="submenu">
      <router-link style="border-bottom:0px;"  v-for="(item,index) in submenu" :key="index"   :to="item.path" exact>{{item.name}}</router-link>
    </div>
  </div>
</template>

<script>
export default {
  beforeRouteEnter(to, from, next) {
    return next(vm => {});
  },
  name: "headerbox",
  data() {
    return {
      menuData:'',
      submenu:'',
      thisurl:'',
    };
  },
  watch:{
    // '$store.state.thisurl':function(){
    //   this.thisurl = this.$store.state.thisurl.split('/')[1]//当前页面的一级
    //   console.log(this.thisurl);
    //   this.menu()
    // },
    '$store.state.submenu':function(){
      console.log(this.$store.state.submenu);
      this.submenu = this.$store.state.submenu
      // this.thisurl = this.$store.state.thisurl.split('/')[1]//当前页面的一级
      // console.log(this.thisurl);
      // this.menu()
    }
  },
  methods:{
    // menu(){
    //   this.menuData = this.$store.state.menu
    //   for (let item in this.menuData) {
    //     let fu = this.menuData[item].path.split('/')[1]//导航list的一级
    //     if(fu == this.thisurl){
    //       console.log(fu);
    //       console.log(this.menuData[item]);
    //       this.menuData[item].active = true
    //     }
    //   }
    // }
  },
  created() {
    this.menuData = this.$store.state.menu//获取导航数据并写入页面
    // for (let item in this.menuData) {
    //   // let fu = this.menuData[item].path
    //   // console.log(this.$route.path.split('/')[1])
    //   // console.log(item)
    //   // console.log(this.menuData[item].path);

    //   // if (this.menuData[item].path == this.common.getpath(this)) {
    //   //   this.menuData[item].active = true;
    //   // } else {
    //   //   this.menuData[item].active = false;
    //   // }
    // }
  }
};
</script>
<style scoped lang='stylus' scoped>
.nav_small {
  height: 56px;
  background: #2C2828;
  text-align: center;
}

.nav_small a {
  font-size: 16px;
  margin-top: 18px;
  padding: 0 34px;
  border-right: 1px solid #888275;
  color: #888275;
  display: inline-block;
  font-weight: 300;
}
.nav_small .active,.nav_small a:hover {
  color: #DFC389;
  font-weight: 300;
}
.header {
  background: #171515;
  position: relative;
  padding: 0;
  box-sizing: border-box;
}

.group {
  height: 147px;
  width: 1200px;
  margin: 0 auto;
  position: relative;
  box-sizing: border-box;
}

.logo {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  top: 26px;
  width: 65px;
}

.navbox {
  position: absolute;
  top: 108px;
}

.nav {
  display: flex;
  font-size: 16px;
  justify-content: center;
  color: #888275;
  box-sizing: border-box;
}

body .header .group .nav a {
  float: left;
  padding: 0 17px;
  color: #888275;
  padding-bottom: 10px;
  font-weight: 300;
  font-size: 16px;
  box-sizing: border-box;
}

body .header .group .nav span {
  width: 1px;
  height: 11px;
  color: #888275;
  float: left;
  margin: 0 20px;
  box-sizing: border-box;
}

.router-link-active {
  color: #DFC389 !important;
  font-weight: 300;
  border-bottom: 3px solid #DFC389;
}
</style>